<template>
  <div class="card-page">
    <tool-bar nav="" :title="action_name + '自定义K8sDeployment'">
      <el-button size="small" @click="$router.push('/dev/user-k8s-deployment/add')" v-if="$props.action=='edit'">新建
      </el-button>
      <el-button size="small" @click="save_click" type="primary">保存</el-button>
    </tool-bar>
    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">
          <template #header><span>基本信息</span></template>
          <kv label="name">
            <el-input v-model="info.name" chk="*"/>
          </kv>
          <kv label="备注">
            <el-input v-model="info.remark" type="textarea"/>
          </kv>
          <kv>
            <template #k>
              <span class="k">参考Dockerfile模板</span></template>
              <sect style="display: flex; justify-content: space-between;" ref="lang">
                <selector v-model.trim="info.language" enum="JenkinsLanguageEnum"
                          chk="*"/>
                <selector v-if="info.language" style="margin-left:6px;" :enum-count="1"
                          v-model.trim="info.languageVersion" @change="version_change"
                          :data="versions"
                          chk="*"/>
              </sect>
          </kv>

          <el-input wrap="off" readonly type="textarea" disabled
                    :autosize="{ minRows: 4, maxRows: 16 }"
                    v-model="info.templateContent"
                    :key="$data.version"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" v-if="info.templateContent">
          <!--                    <el-tabs type="border-card" v-model="$data.coderType" @tab-click="tab_clik">-->

          <!--                        <el-tab-pane label="编辑模式" name="Editor">-->
          <!--                            <input-table v-model="info.editors"-->
          <!--                                         @add="v=>{ v.matchLines = [] }">-->

          <!--                                <el-table-column align="center" label="Yaml 编辑项">-->
          <!--                                    <template v-slot="scope">-->
          <!--                                        <txt-editor :model-value="scope.row" @change="v=>Object.assign(scope.row,v)" :content="info.templateContent"></txt-editor>-->
          <!--                                    </template>-->
          <!--                                </el-table-column>-->
          <!--                            </input-table>-->
          <!--                        </el-tab-pane>-->
          <!--                        <el-tab-pane label="结果" name="Text">-->
          <!--                            <el-input readonly type="textarea" wrap="off" v-model="info.yaml"-->
          <!--                                      :class="[$data.editorError? 'editor-error': '']"-->
          <!--                                      :autosize="{ minRows: 12, maxRows: 23 }"></el-input>-->
          <!--                        </el-tab-pane>-->
          <!--                    </el-tabs>-->

          <el-input v-model="info.yaml" type="textarea" :rows="27"></el-input>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<style scoped lang="scss">
</style>
<script setup>
/**
 * Created by CodeGenerator  at 2022-09-07 13:59:19
 */
import TxtEditor from "@/component/txt-editor.vue"




//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  "editorError": false, "coderType": "Editor", "version": 0,
  "info": {"editors": [], languageVersion: ""}
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});

const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const versions = $computed(function () {
  return jv.ops.versions[$data.info.language] || [];
});

const loadData = async function () {
  if (!$props.id) return;
  var res = await jv.$http.post("/dev/user-k8s-deployment/detail/" + $props.id)
  $data.info = res.data.data;
};
const save_click = async function () {
//校验
    if (jv.chk_main($data) == false) {
        return;
    }
//     computeEditorResult();
//     if ($data.editorError) {
//         return;
//     }
  var res = await jv.$http.post("/dev/user-k8s-deployment/save", $data.info)
//[axios拦截器中已处理了异常]。
  jv.info(action_name + " 成功");
  if ($props.action == "add") {
    var id = res.data.data
    jv.$router.push("/dev/user-k8s-deployment/edit/" + id)
  } else if ($props.action == "edit") {
    jv.$router.push("/dev/user-k8s-deployment/list")
  }
};
// const computeEditorResult = function () {
//     if (!$data.info.editors.length) {
//         $data.info.yaml = "请添加编辑项！";
//         $data.editorError = true;
//         return;
//     }
//     var lines = $data.info.templateContent.split("\n");
//     var msg = "";
//     $data.info.editors.forEachIndexed((editor, index) => {
//         editor.matchLines = jv.dev.getEditorIndexes(lines, editor);
//         if (editor.matchLines.length !== 1) {
//             msg = "第 " + (index + 1) + " 项中匹配了 [" + editor.matchLines.map(it => it + 1).join(",") + "]行的数据，不能提交！";
//             return false;
//         }
//         var lineResult = jv.dev.getEditorResult(lines[editor.matchLines[0]], editor);
//         if (lineResult.msg) {
//             msg = lineResult.msg;
//             return false;
//         }
//         lines[editor.matchLines[0]] = lineResult;
//     });
//     if (!msg) {
//         $data.info.yaml = lines.join("\n");
//         $data.editorError = false;
//         return;
//     } else {
//         $data.info.yaml = msg;
//         $data.editorError = true;
//         return;
//     }
// };
// const tab_clik = function (tab) {
//     if (tab.paneName == "Text") {
//         computeEditorResult();
//     }
// };
// const language_change = function (v) {
// };
const version_change = function () {
  // if (this.$refs.lang.chk() == false) {
  //     return;
  // }
  jv.$http.post("/ops/jenkins/default-deployment-yaml",
      {
        language: $data.info.language,
        languageVersion: $data.info.languageVersion
      }
  ).then(res => {
    $data.version++;
    $data.info.templateContent = res.data.data;
  })
};

onMounted(function () {
  loadData();
})


</script>
